import React from "react";
import {Icon} from 'antd';
import FormDesignerMain from "./Main";
import FormDesignerHeader from "./Header";
import {inject, observer} from "mobx-react";
import {WeaLocaleProvider, WeaRightMenu} from 'ecCom';
import ThemeContext, {getTheme} from "./theme";
import "./index.less";

const { getLabel } = WeaLocaleProvider;
const { Provider } = ThemeContext;
const defaultTheme = getTheme();

@inject('routing', 'edcFormDesignerStore')
@observer
export default class FormDesigner extends React.Component {
  constructor(props) {
    super();

    const { params, readonly } = props;
    const { appid } = params;

    this.store = props.edcFormDesignerStore;
    this.store.init(appid, readonly);
  }

  // componentDidMount (){
  //   const { saveForm } = this.store;

  //   this.store.initShortcut({preventDefault: true});
  //   this.store.shortcut.add('ctrl+s', saveForm);

  // }

  // componentWillUnmount() {
  //   const { saveForm } = this.store;

  //   this.store.shortcut.remove('ctrl+s', saveForm);
  // }

  onRightMenuClick = key => {
    const { saveForm } = this.store;

    switch(key) {
      case "1":
        saveForm();
        break;
      case "2":
        this.props.routing.push({
          pathname: `/edc/form/preview/${this.store.appid}`,
        });
        break;
    }
  }

  render() {
    const { theme, readonly, joinCube } = this.store;
    const rightMenu = [{
      key: '1',
      disabled: readonly,
      icon: <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@6qbdbo@`} type='save' />,
      content: getLabel(30986, '保存'),
    }, {
      key: '2',
      icon: <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@2gqo9d@`} type='eye-o' />,
      content: getLabel(221, '预览'),
    }];

    return (
      <div className='edc-form-designer'>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@6pl9hz`}
          datas={rightMenu}
          showUrlItem={false}
          onClick={this.onRightMenuClick}
        >
          <FormDesignerHeader ecId={`${this && this.props && this.props.ecId || ''}_FormDesignerHeader@m7r4iq`} />
          <Provider ecId={`${this && this.props && this.props.ecId || ''}_Provider@ypkcmd`} value={Object.assign({}, theme || defaultTheme, joinCube)}>
            <FormDesignerMain ecId={`${this && this.props && this.props.ecId || ''}_FormDesignerMain@b6ahgk`} />
          </Provider>
        </WeaRightMenu>
      </div>
    );
  }
}